<template>
	<view class="search_container">
		<div class="search_input">
			<search-input></search-input>
		</div>
		<div class="search_list">
			<search-list v-for="(item,index) in searchDetail.songs" :track="item" :index="index"></search-list>
		</div>
	</view>
</template>

<script setup>
	import searchInput from '@/common/components/SearchInput/SearchInput.vue'
	import searchList from './components/search_list.vue'
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import {
		getSearchAPI
	} from '@/common/api/searchAPI.js'

	const keywords = ref('')
	// 获取搜索结果
	const searchDetail = ref({})
	const getSearch = async (keywords) => {
		const res = await getSearchAPI(keywords)
		if (res.code !== 200) return uni.showToast({
			title: '获取搜索结果失败!',
			duration: 2000,
			icon: 'error'
		})
		searchDetail.value = res.result
		console.log(searchDetail.value);
	}
	onLoad((option) => {
		console.log(option.keywords);
		keywords.value = option.keywords
		getSearch(option.keywords)
	})
</script>

<style lang="scss" scoped>
	.search_input{
		background-color:#fffae8;
		position: fixed;
		top: 88rpx;
		width: 100%;
	}
	.search_list{
		margin-top: 100rpx;
	}
</style>